<template>
  <div>
    <count-show :count="count"/>
    <hr>
    <count-update
      :increment="increment"
      :decrement="decrement"
      :incrementIfOdd="incrementIfOdd"
      :incrementAsync="incrementAsync"
    />
  </div>
</template>

<script>
import CountShow from './CountShow.vue'
import CountUpdate from './CountUpdate.vue'
export default {
  name: 'Counter',
  components: {CountShow, CountUpdate},
  data () {
    return {
      count: 0
    }
  },
  methods: {
    // 增加
    increment (num) {
      this.count += num
    },
    // 减少
    decrement (num) {
      this.count -= num
    },

    // 奇数增加
    incrementIfOdd (num) {
      if (this.count%2===1) {
        this.count += num
      }
    },
    // 异步增加
    incrementAsync (num) {
      setTimeout(() => {
        this.count += num
      }, 1000);
    },
  }
}
</script>

<style scoped>

</style>
